<template>
	<view class="container">
		<navbar title="分类" color='#fff' background="linear-gradient(130deg, #5DC751 0%, #52B148 100%)"
			:showBack="false"></navbar>
		<template v-if='showData'>
			<scroll-view class="first-cate-wrap" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true">
				<view class="first-cate-con">
					<view class="first-cate-item" :id="'first_cate_item'+item.category_id" :data-id="item.category_id"
						:class="[firstCateId == item.category_id ? 'first-cate-item-act':'']"
						v-for='(item,index) in firstCateList' @tap='switchFirstCate'>
						<view class="first-cate-img">
							<base-img :src='item.image'></base-img>
						</view>
						<view class="first-cate-name ellipsis">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<!-- :style="{height:bottomH+'px'}" -->
			<scroll-view class="second-wrap" :style="{height: 'calc(100% - ' + elseHeight + 'px)'}">
				<view class="second-mcon">
					<scroll-view class="second-cate-wrap" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
						<view class="second-cate-con">
							<view class="second-cate-item line-center"
								:class="[secondCateIndex == index ?'second-cate-item-act':'']"
								:id="'second_cate_item'+index" :data-index="index" v-for='(item,index) in secondCateList'
								@tap='switchSecondCate'>
								<view class='second-cate-item-text'>{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view class="third-cate-wrap" scroll-y="true">
						<view class="loading-page" v-if='loadingPage'>
							<load-page :loadPageHeight="'calc(100% - ' + elseHeight + 'px)'"></load-page>
							<!-- <load-page :loadPageHeight='bottomH+"px"'></load-page> -->
						</view>
						<view class="third-cate-main" v-else>
							<view v-if='showThirdData'>
								<template v-if='thirdCateList.length > 0'>
									<view class="swiper-wrap" v-if='adPic'>
										<base-img :src='adPic'></base-img>
									</view>
									<view class="third-cate-con">
										<view class="third-cate-item" v-for='(item,index) in thirdCateList'
											@tap='toGoodsList(item.category_id,item.name)'>
											<view class="third-cate-item-img">
												<base-img :src="item.image"></base-img>
											</view>
											<view class="third-cate-item-text">{{item.name}}</view>
										</view>
									</view>
								</template>
								<view class='no-data' v-else>
									<no-data :emptyStyle='{width:"300rpx",height:"300rpx"}'></no-data>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</scroll-view>
		</template>
		
	</view>
</template>

<script>
	const app = getApp();
	import swiperDots from '@/components/swiper-dots/swiper-dots.vue';
	export default {
		components: {
			swiperDots,
		},
		data() {
			return {
				loadingPage: false,
				showData:false,
				bottomH: '',
				platform: app.getPlatform(),
				firstCateIndex: 0,
				firstCateId: '',
				scrollLeft: 0,
				firstCateList: [],
				secondCateIndex: 0,
				secondCateId: '',
				scrollTop: 0,
				secondCateList: [],
				thirdCateIndex: 0,
				thirdCateId: '',
				thirdCateList: [],
				adPic: '',
				showThirdData: false,
				Authorization: '',
				enterNoLoginNum:0,
				enterLoginNum:0,
				isAuth:1,
				authSituationEnterNum:0,
				noAuthSituationEnterNum:0,
				elseHeight:0,
			};
		},
		onLoad(option) {
			this.getScrollHeight();
		},
		async onShow() {
			this.Authorization = uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : "";
			console.log('this.Authorization',this.Authorization)
			const isAuthRes = await this.getAuthStatus();
			let is_auth;
			if(isAuthRes.code == 0){
				 is_auth = isAuthRes.data.is_auth;
				 console.log('is_auth 2222222222222',is_auth)
				 this.enterLoginNum++;
				 this.enterNoLoginNum = 0;
				 if(this.enterLoginNum == 1){
				 	console.log('第一次进')
					if(is_auth == 1){
						this.authSituationEnterNum = 2;
					}else{
						this.noAuthSituationEnterNum = 2;
					}
				 	this.updateShowData();
				 }else{
				 	console.log('多次进入')
				 	if(is_auth == 1){
				 		this.authSituationEnterNum++;
						this.noAuthSituationEnterNum = 0;
				 		if(this.authSituationEnterNum == 1){
				 			this.updateShowData();
				 		}
				 	}else{
						this.noAuthSituationEnterNum++;
						this.authSituationEnterNum = 0;
						if(this.noAuthSituationEnterNum == 1){
							this.updateShowData();
						}
					}
				 }
			}else{
				console.log('未登录情况下')
				this.enterNoLoginNum++;
				this.enterLoginNum = 0;
				if(this.enterNoLoginNum == 1){
					this.updateShowData();
				}else{
					console.log('多次进入')
				}
			}
			console.log('this.authSituationEnterNum 认证成功',this.authSituationEnterNum)
			console.log('this.noAuthSituationEnterNum 认证失败、未认证',this.noAuthSituationEnterNum)
		},
		methods: {
			/* 
			 *获取一级分类列表
			 *getFirstCate() 获取一级分类
			 * switchFirstCate 切换一级分类
			 */
			async getAuthStatus(){
				return await new Promise((resolve,reject)=>{
					app.globalRequest({
						api:app.getApi().user.getUserInfo,
					}).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
			},
			getFirstCate() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.categoryList,
					data: {
						parent_id: 0,
					}
				}).then(res => {
					that.showData = true;
					if (res.code == 0) {
						that.firstCateList = res.data;
						if (res.data.length > 0) {
							that.firstCateId = res.data[0].category_id;
							that.getSecondCate();
						}
					}
				})
			},
			getSecondCate() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.categoryList,
					data: {
						parent_id: that.firstCateId,
					}
				}).then(res => {
					that.loadingPage = false;
					// that.showThirdData = true;
					if (res.code == 0) {
						that.secondCateList = res.data;
						if (res.data.length > 0) {
							that.secondCateId = res.data[0].category_id;
							that.getThirdCate();
							that.getAdPic()
						}
					}
				})
			},
			getThirdCate() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.categoryList,
					data: {
						parent_id: that.secondCateId,
					}
				}).then(res => {
					that.showThirdData = true;
					if (res.code == 0) {
						that.thirdCateList = res.data;
					}
				})
			},
			getAdPic() {
				const that = this;
				app.globalRequest({
					api: app.getApi().goods.categoryDetail,
					data: {
						category_id: that.secondCateId,
					}
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						that.adPic = res.data.ad_pic;
					}
				})
			},
			switchFirstCate(e) {
				let that = this,
					off_left_num = e.currentTarget.offsetLeft,
					firstCateList = that.firstCateList,
					id = e.currentTarget.dataset.id,
					scrollLeft = 0;
				if (that.firstCateId == id) {
					return;
				}
				// that.firstCateIndex = index;
				that.firstCateId = id;
				uni.createSelectorQuery().select(`#first_cate_item${id}`).boundingClientRect(function(rect) {
					if (off_left_num < app.globalData.windowWidth / 2) {
						scrollLeft = 0;
					} else {
						scrollLeft = off_left_num - app.globalData.windowWidth / 2 + rect.width / 2;
					}
					that.scrollLeft = scrollLeft
				}).exec();
				that.loadingPage = true;
				that.showThirdData = false;
				that.secondCateList = [];
				that.thirdCateList = [];
				that.secondCateId = '';
				that.secondCateIndex = 0;
				that.adPic = '';
				that.getSecondCate()
			},
			//切换二级分类
			switchSecondCate(e) {
				let that = this,
					off_top_num = e.currentTarget.offsetTop,
					index = e.currentTarget.dataset.index,
					secondCateList = that.secondCateList,
					scrollTop = 0;
				if (that.secondCateIndex === index) {
					return;
				}
				that.secondCateIndex = index;
				that.secondCateId = secondCateList[index].category_id;
				uni.createSelectorQuery().select(`#second_cate_item${index}`).boundingClientRect(function(rect) {
					if (off_top_num < that.bottomH / 2) {
						scrollTop = 0;
					} else {
						scrollTop = off_top_num - that.bottomH / 2 + rect.height / 2;
					}
					that.scrollTop = scrollTop;
				}).exec();
				that.loadingPage = true;
				that.thirdCateList = [];
				that.adPic = '';
				that.getThirdCate();
				that.getAdPic();
			},
			//获取底部scroll-view高度
			getScrollHeight() {
				const firstCateHeight = uni.upx2px(206),
					navbarHeight = app.globalData.headAllHeight;
				let elseHeight = 0;
				if (this.platform === 'mp') {
					elseHeight = firstCateHeight + navbarHeight;
				} else {
					elseHeight = firstCateHeight + navbarHeight;
				}
				this.elseHeight = elseHeight;
				this.bottomH = app.globalData.windowHeight - elseHeight;
			},
			toGoodsList(id, name) {
				// if (!this.Authorization) {
				// 	uni.navigateTo({
				// 		url: '/pages/login-page/login/login'
				// 	})
				// 	return;
				// }
				this.thirdCateId = id;
				uni.navigateTo({
					url: `/pages/goods-page/goods-list/goods-list?first_cate_id=${this.firstCateId}&second_cate_id=${this.secondCateId}&third_cate_id=${this.thirdCateId}&name=${name}`
				})
			},
			/* 
			 * 根据companyID的不同设置是否更新数据
			 * updateShowData 登陆之后 更新展示数据
			 */
			getDefaultCompanyId() {
				app.globalRequest({
					api: app.getApi().baseApi.globalCompanyId
				}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('DEFAULT_COMPANY_ID', JSON.stringify(res.data))
					}
				})
			},
			updateShowData(){
				this.showData = false;
				this.firstCateIndex = 0;
				this.firstCateId = '';
				this.scrollLeft = 0;
				this.firstCateList = [];
				this.secondCateIndex = 0;
				this.secondCateId = '';
				this.scrollTop = 0;
				this.secondCateList = [];
				this.thirdCateIndex = 0;
				this.thirdCateId = '';
				this.thirdCateList = [];
				this.adPic = '';
				this.showThirdData = false;
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.getFirstCate()
			},

		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		overflow-y: hidden;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		overflow-y: hidden;
		background: #fff;
	}

	.first-cate-wrap {
		width: 100%;
		height: 206rpx;
		// padding-top: 20rpx;
		box-sizing: border-box;
		white-space: nowrap;
		border-bottom: 4rpx solid #F9F9F9;

		.first-cate-con {
			padding: 0 16rpx;
			display: inline-flex;
			height: 100%;
			align-items: center;
			.first-cate-item {
				width: 112rpx;

				&:last-of-type {
					margin-right: 0;
				}

				.first-cate-img {
					width: 92rpx;
					height: 92rpx;
					border-radius: 100%;
					border: 4rpx solid transparent;
					box-sizing: border-box;
					overflow: hidden;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.first-cate-name {
					transform: scale(0.5);
					transform-origin: left top;
					width: 200%;
					height: 64rpx;
					text-align: center;
					color: #949495;
					font-size: 40rpx;
					margin-top: 16rpx;
					line-height: 60rpx;
				}
			}

			.first-cate-item-act {
				.first-cate-img {
					border: 4rpx solid #fff;
					border-radius: 100%;
					overflow: hidden;
					box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0,0,0,0.16);
				}

				.first-cate-name {
					background: #1EB368;
					border-radius: 32rpx;
					color: #fff;
				}
			}
		}
	}

	.second-wrap {
		width: 100%;

		.second-mcon {
			width: 100%;
			height: 100%;
			display: flex;
		}

		.second-cate-wrap {
			width: 172rpx;
			height: 100%;
			background: #F9F9F9;

			.second-cate-item {
				width: 100%;
				height: 88rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.second-cate-item-text {
					-webkit-line-clamp: 2;
				}
			}

			.second-cate-item-act {
				background: #fff;
				position: relative;
				color: #1EB368;

				&:after {
					content: '';
					width: 8rpx;
					height: 30rpx;
					border-radius: 15rpx;
					background: #1EB368;
					position: absolute;
					left: 0rpx;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}

		.third-cate-wrap {
			width: 578rpx;
			height: 100%;

			.third-cate-main {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.swiper-wrap {
				width: 100%;
				height: 250rpx;
				border-radius: 8rpx;
				overflow: hidden;
				transform: translateY(0);
				position: relative;
				margin-bottom: 20rpx;

				.swiper-con {
					width: 100%;
					height: 100%;

					swiper-item,
					.img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.third-cate-con {
				padding: 0rpx 0 20rpx;
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3, 166rpx);
				justify-content: space-between;
				gap: 18rpx;

			}

			.third-cate-item {
				width: 166rpx;

				.third-cate-item-img {
					width: 100%;
					height: 166rpx;
					margin: auto;
				}

				.third-cate-item-text {
					text-align: center;
					padding-top: 4rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.no-data {
		margin-top: 100rpx;
	}
</style>